<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>模块化开发方式_傻瓜教程</title>
        <!-- layui css -->
        <link rel="stylesheet" type="text/css" href="https://www.layuicdn.com/layui-v2.5.6/css/layui.css"/>
        <!-- layui js -->
        <script src="https://www.layuicdn.com/layui-v2.5.6/layui.js"></script>
    </head>
    <body style="min-height:400px">
        <div class="layui-container">
            <div class="layui-row">
                <form class="layui-form" action="">
                    <div class="layui-form-item">
                        <label class="layui-form-label">员工姓名</label>
                        <div class="layui-input-block">
                            <input type="text" name="empName" required lay-verify="required" placeholder="员工姓名"
                                   autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">年龄</label>
                        <div class="layui-input-block">
                            <input type="text" name="age" required lay-verify="required" placeholder="年龄"
                                   autocomplete="off" class="layui-input">
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label">部门</label>
                        <div class="layui-input-block">
                            <select id="depId" name="depId" lay-verify="required">
                                <!--                                <option value=""></option>-->
                                <!--                                <option value="0">科技</option>-->
                                <!--                                <option value="1">财务</option>-->
                                <!--                                <option value="2">人事</option>-->
                            </select>
                        </div>
                    </div>


                    <div class="layui-form-item">
                        <label class="layui-form-label">性别</label>
                        <div class="layui-input-block">
                            <input type="radio" name="sex" value="1" title="男" checked>
                            <input type="radio" name="sex" value="2" title="女">
                        </div>
                    </div>


                    <div class="layui-form-item">
                        <label class="layui-form-label">入职时间</label>
                        <div class="layui-input-block">
                            <input type="text" id="hireDate" name="hireDate" required lay-verify="required"
                                   placeholder="入职时间"
                                   autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-input-block">
                            <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
                            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                        </div>
                    </div>
                </form>
            </div>

        </div>
    </body>

    <script>

        layui.use(['form', 'laydate', 'layer'], function () {
            var form = layui.form;
            var laydate = layui.laydate;
            var $ = layui.jquery;

            //执行一个laydate实例
            laydate.render({
                elem: '#hireDate' //指定元素
                , trigger: 'click' //采用click弹出
                // , type: 'datetime'
            });

            // 加载部门列表数据
            // $.post("http://localhost:8080/listDep",function(data,status){
            //     console.log(data)
            //     alert("Data: " + data + "nStatus: " + status);
            // });
            $.getJSON("http://localhost:8080/listDep", function (d) {
                console.log("获取部门列表", d);

                let str = "<option value=\"\"></option>";
                let list = d.obj.data;
                for (i = 0; i < list.length; i++) {
                    str += "<option value=\"" + list[i].depId + "\">" + list[i].depName + "</option>"
                }
                console.log("新增时，拼接的select数据:", str);
                $("#depId").html(str);
                form.render(); // key:::这里要重新加载下。
            });

            //监听提交
            form.on('submit(formDemo)', function (data) {
                layer.msg(JSON.stringify(data.field));
                //表单形式提交
                // $.post("http://localhost:8080/addEmp", data.field, function (data, status) {
                //     alert("数据: \n" + data + "\n状态: " + status);
                // })


                /// ajax 提交post 的json 模式，这样在传时间参给服务器时，   @JsonFormat(pattern = "yyyy-MM-dd HH:mm:ss")    一键搞定
                $.ajax({
                    type: "POST",
                    url: "http://localhost:8080/addEmp",
                    contentType: "application/json;charset=utf-8",
                    data: JSON.stringify(data.field),
                    dataType: "json",
                    success: function (message) {
                        console.log("新增返回的数据", message, message.code)
                        // alert("提交成功" + JSON.stringify(message));
                        var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                        parent.layer.close(index); //再执行关闭
                    },
                    error: function (message) {
                        layer.msg("提交失败" + message.msg);
                    }
                });


                return false;
            });
        });
    </script>
</html>
